<template>
  <div 
    :id="id" 
  />
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    props:['id','chartdata','title','subtext','xAxisDate'],
    data() {
      return {
        chart: null,
      }
    },
    mounted() {
      setTimeout(() => {
        this.draw()
      })
      window.addEventListener('resize', this.resizeChart)
    },
    activated() {
      if (this.chart) {
        this.resizeChart()
      }
    },
    methods: {
      resizeChart() {
        this.chart.resize()
      },
      draw() {
        const { title,id,subtext,xAxisDate:dataAxis,chartdata:yData } = this
        this.chart = echarts.init(document.getElementById(id))
        
        const option = {
          title: {
            text: title? title:'',
            subtext,
            left:'0'
          },
          xAxis: {
            data: dataAxis,
            axisLabel: {inside: true,color: '#fff'},
            axisTick: {show: false},
            // axisLine: {show: false},
            z: 10
          },
          yAxis: {
            axisLine: {show: false},
            axisTick: {show: false},
            axisLabel: {color: '#999'}
          },
          dataZoom: [{type: 'inside'}],
          grid:{
            top:40,
            left:40,
            right:40,
            bottom:40
          },
          series: [
            {
              type: 'bar',
              showBackground: true,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#83bff6' },
                  { offset: 0.5, color: '#188df0' },
                  { offset: 1, color: '#188df0' }
                ])
              },
              emphasis: {
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#2378f7' },
                    { offset: 0.7, color: '#2378f7' },
                    { offset: 1, color: '#83bff6' }
                  ])
                }
              },
              data: yData
            }
          ]
        };
        const zoomSize = 6;
        this.chart.setOption(option)
      },
    },
    destroyed() {
      window.removeEventListener('resize', this.resizeChart)
    }
  }
</script>
<style lang="scss" scoped>
.main {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
}
</style>